<template>
    <div class="login-page">
        <div class="login-container">
            <div class="login-header">
                <h1>欢迎登录</h1>
                <p>登录您的账户以访问博客管理系统</p>
            </div>

            <div class="login-form">
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input
                        type="text"
                        id="username"
                        v-model="username"
                        placeholder="请输入用户名"
                        required
                    />
                </div>

                <div class="form-group">
                    <label for="password">密码</label>
                    <input
                        type="password"
                        id="password"
                        v-model="password"
                        placeholder="请输入密码"
                        required
                    />
                </div>

                <div v-if="loginError" class="error-message">
                    {{ loginError }}
                </div>

                <div class="form-actions">
                    <button
                        class="login-btn"
                        @click="handleLogin"
                        :disabled="isLoading"
                    >
                        {{ isLoading ? "登录中..." : "登录" }}
                    </button>
                </div>

                <div class="login-tips">
                    <p>提示: 用户名 user, 密码 xxxxxx</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { userApi } from "../api";

const router = useRouter();
const username = ref("");
const password = ref("");
const loginError = ref("");
const isLoading = ref(false);

const handleLogin = async () => {
    // 表单验证
    if (!username.value || !password.value) {
        loginError.value = "请输入用户名和密码";
        return;
    }

    loginError.value = "";
    isLoading.value = true;

    try {
        // 使用API服务登录
        const response = await userApi.login(username.value, password.value);

        if (response.data && response.data.length > 0) {
            // 登录成功
            const user = response.data[0];

            // 存储用户信息和登录状态
            localStorage.setItem("isLogin", "true");
            localStorage.setItem(
                "user",
                JSON.stringify({
                    id: user.id,
                    username: user.username,
                    name: user.name,
                    avatar: user.avatar,
                    role: user.role,
                })
            );

            // 跳转到首页
            router.push("/home");
        } else {
            loginError.value = "用户名或密码错误";
        }
    } catch (error) {
        console.error("登录请求出错:", error);

        // 如果API不可用，使用本地验证
        if (username.value === "admin" && password.value === "123456") {
            localStorage.setItem("isLogin", "true");
            localStorage.setItem(
                "user",
                JSON.stringify({
                    id: 1,
                    username: "admin",
                    name: "管理员",
                    role: "admin",
                })
            );
            router.push("/home");
        } else {
            loginError.value = "用户名或密码错误";
        }
    } finally {
        isLoading.value = false;
    }
};
</script>

<style scoped>
.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f9f9f9;
}

.login-container {
    width: 100%;
    max-width: 400px;
    padding: 40px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.login-header {
    text-align: center;
    margin-bottom: 30px;
}

.login-header h1 {
    margin-bottom: 10px;
    color: #3498db;
}

.login-header p {
    color: #777;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: #555;
}

.error-message {
    color: #e74c3c;
    margin-bottom: 15px;
    font-size: 0.9rem;
}

.form-actions {
    margin-top: 30px;
}

.login-btn {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    background-color: #3498db;
}

.login-btn:disabled {
    background-color: #95a5a6;
    cursor: not-allowed;
}

.login-tips {
    margin-top: 20px;
    text-align: center;
    font-size: 0.9rem;
    color: #7f8c8d;
}
</style>
